<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>旋转菜单</title>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
		/>
		<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
		<!-- 菜单部分 -->
		<nav class="menu">
			<input
				checked="checked"
				class="menu-toggler"
				id="menu-toggler"
				type="checkbox"
			/>
			<label for="menu-toggler"></label>
			<ul>
				<li class="menu-item">
					<!-- javascript:void(0)表示单击链接不会发生效果 -->
					<a class="fa fa-weibo" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-youtube" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-wordpress" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-qq" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-weixin" href="javascript:void(0)"></a>
				</li>
				<li class="menu-item">
					<a class="fa fa-github" href="javascript:void(0)"></a>
				</li>
			</ul>
		</nav>
	</body>
</html>
